<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>event</title>
</head>
<body onclick="console.log(100)">
	<div><p>click</p></div>
	<script>
		let div = document.querySelector('div')
		let p = document.querySelector('p')
		// document.body.onclick = () => console.log(200)
		window.addEventListener('click', () => console.log(1), true)
		document.addEventListener('click', () => console.log(2), true)
		document.documentElement.addEventListener('click', () => console.log(3), true)
		document.body.addEventListener('click', () => console.log(4), true)
		div.addEventListener('click', () => console.log(5), true)
		p.addEventListener('click', (e) => console.log(e.eventPhase, e.currentTarget, e.target))
		div.addEventListener('click', (e) => console.log(e.eventPhase, e.currentTarget, e.target), false)
		document.body.addEventListener('click', () => console.log(6), false)
		document.documentElement.addEventListener('click', () => console.log(7), false)
		document.addEventListener('click', () => console.log(8), false)
		window.addEventListener('click', () => console.log(9), false)
	</script>
</body>
</html>